<template>
  <div id="channelSet">
    <div class="table">
      <h1 class="con-right-title">
        <i class="fa fa-reply" @click="goBack"></i>
        {{ channerName }}频道及子频道编辑
      </h1>
      <!--上部搜索条件-->
      <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
      <!-- 操作按钮 -->
      <div class="table-conBtn">
        <el-button
          v-permission="'wh:system:contentCategoryTag:add'"
          type="warning"
          icon="el-icon-plus"
          @click="handleAddEdit('')"
        >
          创建子频道
        </el-button>
        <freshCom @searchList="searchList"></freshCom>
      </div>
      <!--下部table-->
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
        max-height="490"
        ref="table"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column type="index" width="60" align="center" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="子频道"
          prop="name"
          min-width="100"
        ></el-table-column>
        <el-table-column label="子频道状态" prop="status" min-width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.status === true">启用</span>
            <span v-else-if="scope.row.status === false">停用</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createdDate"
          min-width="160"
        ></el-table-column>
        <el-table-column v-if="see" label="排序" prop="sortNum" min-width="100">
        </el-table-column>
        <el-table-column
          label="创建人"
          prop="createdUser.userName"
          min-width="100"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button
              v-permission="'wh:system:contentTag:enable'"
              v-if="scope.row.status === false && scope.row.deleted === false"
              type="text"
              @click="HandleStartover(scope.row.id)"
            >
              启用
            </el-button>
            <el-button
              v-permission="'wh:system:contentTag:disable'"
              v-if="scope.row.status === true && scope.row.deleted === false"
              type="text"
              @click="handleCease(scope.row.id)"
            >
              停用
            </el-button>
            <el-button
              v-permission="'wh:system:contentTag:recovery'"
              v-if="scope.row.deleted === true && scope.row.status === false"
              type="text"
              @click="recover(scope.row.id)"
            >
              恢复
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.deleted === true && scope.row.status === false"
              @click="delReason(scope.row)"
            >
              删除原因
            </el-button>
            <el-button
              v-permission="'wh:system:contentTag:edit'"
              v-if="scope.row.status === false && scope.row.deleted === false"
              type="text"
              @click="
                handleAddEdit(scope.row.id, scope.row.sortNum, scope.row.status)
              "
            >
              编辑
            </el-button>
            <el-button
              v-permission="'wh:system:contentTag:sort'"
              v-if="scope.row.status === false && scope.row.deleted === false"
              type="text"
              @click="handleSort(scope.row)"
            >
              编辑排序
            </el-button>
            <el-button
              v-permission="'wh:system:contentTag:delete'"
              v-if="scope.row.status === false && scope.row.deleted === false"
              type="text"
              @click="delLabelHandle(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
      <!-- 添加/编辑标签 dialog -->
      <dialogAddEdit
        v-if="dialogData.isShow"
        :dialog-data="dialogData"
        @refresh="refresh"
      ></dialogAddEdit>
      <!-- 编辑排序 dialog -->
      <dialogSort
        v-if="dialogForSort.isShow"
        :dialogForSort="dialogForSort"
        @refresh="refresh"
      ></dialogSort>
    </div>
    <!-- 删除对话框 -->
    <delDialog
      v-if="delDialogData.isShow"
      :delDialogData="delDialogData"
      @refresh="refresh"
    ></delDialog>
  </div>
</template>

<script>
import {
  getLifeList,
  disable,
  enable,
  recovers
} from '@/api/appSetting/contentTag' // 接口
import topSearch from '@component/appSetting/contentTags/lifeContents/topSearch' // 上部搜索条件
import delDialog from '@component/appSetting/contentTags/lifeContents/delDialog' // 删除
import dialogAddEdit from '@component/appSetting/contentTags/lifeContents/dialogAddEdit' // 添加/编辑标签
import dialogSort from '@component/appSetting/contentTags/lifeContents/dialogSort' // 编辑排序
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'subchannelEditor',
  msg: '频道设置/子频道',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogAddEdit,
    dialogSort,
    delDialog
  },
  data() {
    return {
      see: true,
      loading: true,
      channerName: '',
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      tableData: [], // table内容
      formInline: {
        // 搜索条件
        status: '',
        deleted: '',
        name: ''
      },
      // 添加/编辑标签
      dialogData: {
        isShow: false,
        sortNum: '',
        status: '',
        cId: '',
        id: null // 编辑时，传递的参数
      },
      // 编辑排序
      dialogForSort: {
        isShow: false,
        params: '',
        total: '',
        id: ''
      },
      // 删除对话框
      delDialogData: {
        isShow: false, // 控制不通过对话框显示
        params: '', // 传递的参数
        id: ''
      },
      multipleSelection: [],
      powerStr: 'system:contentCategoryTag:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  watch: {
    // $route.path改变时，mounted()不执行,通过监听$route.path，执行进入页面方法
    '$route.path': {
      handler(newV, oldV) {
        this.init()
        this.searchList()
      },
      deep: true
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.init()
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 进入页面执行的方法 */
    init() {
      this.formInline.id = this.$route.query.id
      this.channerName = this.$route.query.name
      this.searchParams.pageNum = 1
    },
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        } else {
          this.canShowPage = true
          this.init()
        }
      })
    },

    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getLifeList(
        this.formInline.id,
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 返回按钮
    goBack() {
      this.$router.go(-1)
      // let query = {
      //   mId: this.$route.query.mId
      // }
      // this.$router.push({ name: 'channelSetList', query: query })
    },
    // 添加/编辑标签
    handleAddEdit(id = '', sortNum, status) {
      this.dialogData.isShow = true
      this.dialogData.sortNum = sortNum
      this.dialogData.status = status
      this.dialogData.cId = id
      this.dialogData.id = this.formInline.id
    },
    // 编辑排序
    handleSort(item) {
      this.dialogForSort.params = {
        cId: item.id,
        sortNum: item.sortNum
      }
      this.dialogForSort.isShow = true
      this.dialogForSort.id = this.formInline.id
      this.dialogForSort.total = this.total
    },
    // 删除
    delLabelHandle(item) {
      this.delDialogData.isShow = true
      this.delDialogData.params = {
        reason: item.reason,
        id: item.id
      }
      this.delDialogData.id = this.formInline.id
    },
    // 恢复
    recover(id) {
      this.$confirm(`确定要恢复该子频道？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        recovers(this.formInline.id, id, (response) => {
          this.$message({
            type: 'success',
            message: '已恢复'
          })
          this.searchList()
        })
      })
    },
    // 查看删除原因
    delReason(row) {
      this.$alert(
        `<div>删除时间:${row.lastModifiedDate}</div><div>删除人:${row.lastModifiedUser.userName}</div><div>删除原因:${row.reason}</div>`,
        '查看删除原因',
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false
        }
      ).then(() => {})
    },
    // 启用
    HandleStartover(id) {
      this.$confirm(`确认要启用该子频道吗？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        enable(this.formInline.id, id, (response) => {
          this.$message({
            type: 'success',
            message: '已启用'
          })
          this.searchList()
        })
      })
    },
    // 停用
    handleCease(id) {
      this.$confirm(`确认要停用该子频道吗？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disable(this.formInline.id, id, (response) => {
          this.$message({
            type: 'success',
            message: '已停用'
          })
          this.searchList()
        })
      })
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.formInline.deleted === 'true'
        ? (this.see = false)
        : (this.see = true)
      this.searchList()
    },
    // checkbox选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
      }
    }
  },
  // 路由离开时清空用户信息
  beforeRouteLeave(to, from, next) {
    if (to) {
      this.$destroy()
    }
    next()
  }
}
</script>

<style lang="less">
#channelSet {
  height: 100%;

  .search-box {
    padding-left: 30px !important;
  }

  .bottom-box {
    position: relative;
    height: calc(~'100% - 40px');

    .table-conBtn {
      padding-left: 30px !important;
    }
    .left-tree {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      /*  background: #8cc5ff;*/
      width: 192px;
      height: calc(~'100% - 20px');
      overflow: hidden;

      &.hide-tree {
        width: 12px;
      }

      span.btn-arrow {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -25px;
        width: 12px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: #ddd;
        cursor: pointer;

        &:hover {
          background: #ff8c00;
        }
      }
    }
    .table {
      &.hide-tree {
        margin-left: calc(~'12px + 20px');
      }
    }
  }
}
</style>
